<template>
  <div class="project-status-tab">
    <!-- Header: Toolbar -->
    <div class="toolbar">
      <!-- Filters -->
      <div class="filters">
        <el-input
          v-model="filters.q"
          placeholder="搜索剧集ID、文件名..."
          @keyup.enter="applyFilters"
          clearable
          class="filter-item"
        />
        <el-select
          v-model="filters.status"
          placeholder="项目状态"
          @change="applyFilters"
          clearable
          class="filter-item"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" :icon="Search" @click="applyFilters">搜索</el-button>
        <el-button :icon="Refresh" @click="handleManualRefresh" :loading="isRefreshing">刷新</el-button>
      </div>

      <!-- Batch Actions -->
      <div class="batch-actions">
        <div class="selection-info" v-if="selectedProjects.length > 0">
          <span class="selection-count">已选择 {{ selectedProjects.length }} 个项目</span>
          <span v-if="isAllSelected" class="all-selected-indicator">（全选）</span>
        </div>
        <div class="selection-controls">
          <el-button
            size="small"
            @click="selectAllVisible"
            :disabled="safeProjects.length === 0"
          >
            选择当前页 ({{ safeProjects.length }})
          </el-button>
          <el-button
            size="small"
            @click="handleDeleteAllProjects"
            :disabled="totalProjects === 0"
            :loading="loadingAllSelection"
            type="danger"
          >
            <template v-if="loadingAllSelection && deleteProgress.total > 0">
              ⚠️ 删除中 {{ deleteProgress.current }}/{{ deleteProgress.total }}
            </template>
            <template v-else>
              ⚠️ 删除全部 {{ filters.status ? `${getStatusLabel(filters.status)}` : '' }} ({{ totalProjects }})
            </template>
          </el-button>
          <el-button
            size="small"
            @click="clearSelection"
            :disabled="selectedProjects.length === 0"
          >
            清除选择
          </el-button>
          </div>
        <el-button-group>
          <el-button
            :icon="Refresh"
            @click="handleBatchAction('retry')"
            :disabled="!canBatchRetry"
            :type="canBatchRetry ? 'primary' : 'default'"
          >
            批量重试 {{ selectedProjects.length > 0 ? `(${selectedProjects.length})` : '' }}
          </el-button>
          <el-button
            :icon="CircleClose"
            @click="handleBatchAction('cancel')"
            :disabled="!canBatchCancel"
            :type="canBatchCancel ? 'warning' : 'default'"
          >
            批量取消 {{ selectedProjects.length > 0 ? `(${selectedProjects.length})` : '' }}
          </el-button>
          <el-button
            type="danger"
            :icon="Delete"
            @click="handleBatchAction('delete')"
            :disabled="selectedProjects.length === 0"
          >
            批量删除 {{ selectedProjects.length > 0 ? `(${selectedProjects.length})` : '' }}
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- Table -->
    <el-table
      v-loading="loading"
      :data="safeProjects"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      row-key="project_uid"
      border
      height="600"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="expand" width="50">
        <template #default="{ row }">
          <div class="subtitle-details">
            <h4>字幕文件详情 ({{ row.subtitles.length }})</h4>
            <el-table
              :data="row.subtitles"
              size="small"
              border
              :show-header="row.subtitles.length > 0"
              max-height="300"
            >
              <el-table-column prop="language" label="语言" width="120" />
              <el-table-column label="状态" width="120">
                <template #default="{ row: subtitle }">
                  <el-tag :type="getProjectStatusType(subtitle.status)" size="small">
                    {{ getProjectStatusText(subtitle.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="file_path" label="文件路径" show-overflow-tooltip />
              <el-table-column label="创建于" width="180">
                <template #default="{ row: subtitle }">
                  {{ formatDate(subtitle.created_at) }}
                </template>
              </el-table-column>
              <el-table-column label="更新于" width="180">
                <template #default="{ row: subtitle }">
                  {{ formatDate(subtitle.updated_at) }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="episode_id" label="剧集ID" width="120">
        <template #default="{ row }">{{ String(row.episode_id) }}</template>
      </el-table-column>
      <el-table-column label="状态" width="180">
        <template #default="{ row }">
          <div class="status-column">
            <el-tag :type="getProjectStatusType(row.status)">{{ getProjectStatusText(row.status) }}</el-tag>
            <span v-if="getRetryCount(row.project_uid) > 0" class="retry-count">
              重试: {{ getRetryCount(row.project_uid) }}/{{ MAX_RETRY_COUNT }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="错误信息" width="250" show-overflow-tooltip>
        <template #default="{ row }">
          <div v-if="row.error_message" class="error-message">
            <el-tooltip effect="dark" :content="getCleanErrorMessage(row.error_message)" placement="top">
              <el-tag type="danger" size="small">
                <el-icon><Warning /></el-icon>
                {{ truncateErrorMessage(row.error_message) }}
              </el-tag>
            </el-tooltip>
          </div>
          <span v-else class="no-error">—</span>
        </template>
      </el-table-column>
      <el-table-column label="已请求语言" show-overflow-tooltip>
        <template #default="{ row }">
          <LanguageTags :languages="getProjectLanguages(row)" />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="200">
        <template #default="{ row }">{{ formatDate(row.created_at) }}</template>
      </el-table-column>
      <el-table-column label="操作" width="220" fixed="right" align="center">
        <template #default="{ row }">
          <el-button size="small" :icon="Refresh" @click="retryProject(row)" :disabled="!canRetry(row)">重试</el-button>
          <el-button size="small" :icon="CircleClose" @click="cancelProject(row)" :disabled="!canCancel(row)">取消</el-button>
          <el-button size="small" type="danger" :icon="Delete" @click="deleteProject(row.project_uid, row.episode_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- Pagination -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalProjects"
        @size-change="handlePageChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue';
import { useProjects } from '../../composables/useProjects';
import type { Project } from '../../api/projects';
import { getProjects, batchUpdateProjects as apiBatchUpdateProjects } from '../../api/projects';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Refresh, CircleClose, Delete, Warning } from '@element-plus/icons-vue';
import LanguageTags from './LanguageTags.vue';
import { getProjectStatusText, getProjectStatusType, getStatusLabel, canRetryProject, canCancelProject } from '../../utils/projectStatus';

// 暂时移除动态导入，直接在模板中使用组件名
// 这些组件将在模板中作为字符串使用

const {
  projects,
  totalProjects,
  loading,
  fetchProjects,
  retryProject,
  cancelProject,
  deleteProject,
  batchUpdateProjects,
  disablePolling,
  getRetryCount,
  forceRefresh,
} = useProjects();

const MAX_RETRY_COUNT = 5; // 与composable中的常量保持一致

const filters = reactive({
  q: '',
  status: '',
});

const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
});

const selectedProjects = ref<Project[]>([]);
const loadingAllSelection = ref(false);
const isAllSelected = ref(false);
const deleteProgress = ref({ current: 0, total: 0 });
const isRefreshing = ref(false);

const statusOptions = [
  { value: 'pending', label: '队列中' },
  { value: 'processing', label: '处理中' },
  { value: 'completed', label: '已完成' },
  { value: 'failed', label: '失败' },
  { value: 'cancelled', label: '已取消' },
  { value: 'partial_failure', label: '部分失败' },
];

// 性能优化：缓存日期格式化（使用LRU策略）
const dateFormatCache = new Map<string, string>();
const MAX_CACHE_SIZE = 200; // 减少最大缓存大小

const formatDate = (dateString: string): string => {
  if (!dateString) return '';

  if (dateFormatCache.has(dateString)) {
    // LRU: 重新设置以更新访问顺序
    const value = dateFormatCache.get(dateString)!;
    dateFormatCache.delete(dateString);
    dateFormatCache.set(dateString, value);
    return value;
  }

  try {
    const formatted = new Date(dateString).toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });

    // 如果缓存已满，删除最旧的条目
    if (dateFormatCache.size >= MAX_CACHE_SIZE) {
      const firstKey = dateFormatCache.keys().next().value;
      if (firstKey !== undefined) {
        dateFormatCache.delete(firstKey);
      }
    }

    dateFormatCache.set(dateString, formatted);
    return formatted;
  } catch (error) {
    console.error('日期格式化失败:', error);
    return dateString; // 返回原始字符串作为后备
  }
};

// 安全的项目数据过滤
const safeProjects = computed(() => {
  return projects.value.filter(project =>
    project &&
    project.project_uid &&
    project.episode_id &&
    Array.isArray(project.subtitles)
  );
});

// 性能优化：使用computed缓存语言列表
const projectLanguagesCache = computed(() => {
  const cache = new Map<string, string[]>();
  safeProjects.value.forEach(project => {
    const cacheKey = `${project.project_uid}_${project.updated_at}`;
    cache.set(cacheKey, project.subtitles.map(s => s.language).filter(Boolean));
  });
  return cache;
});

const getProjectLanguages = (project: Project): string[] => {
  if (!project || !project.subtitles || !Array.isArray(project.subtitles)) {
    return [];
  }
  const cacheKey = `${project.project_uid}_${project.updated_at}`;
  return projectLanguagesCache.value.get(cacheKey) || project.subtitles.map(s => s.language).filter(Boolean);
};

// 提取干净的错误信息（用于tooltip）
const getCleanErrorMessage = (message: string): string => {
  if (!message) return '';
  
  // 提取严重错误后面的实际错误信息
  const severErrorMatch = message.match(/严重错误:\s*(.*)$/);
  return severErrorMatch ? severErrorMatch[1].trim() : message;
};

// 截断错误信息用于显示
const truncateErrorMessage = (message: string, maxLength: number = 30): string => {
  if (!message) return '';
  
  const cleanMessage = getCleanErrorMessage(message);
  return cleanMessage.length > maxLength ? cleanMessage.substring(0, maxLength) + '...' : cleanMessage;
};

// 性能优化：memo化状态检查函数
const canRetryMemo = computed(() => {
  const memo = new Map<string, boolean>();
  safeProjects.value.forEach(project => {
    memo.set(project.project_uid, canRetryProject(project.status));
  });
  return memo;
});

const canCancelMemo = computed(() => {
  const memo = new Map<string, boolean>();
  safeProjects.value.forEach(project => {
    memo.set(project.project_uid, canCancelProject(project.status));
  });
  return memo;
});

// 状态映射函数已移至 src/utils/projectStatus.ts

const canRetry = (project: Project) => canRetryMemo.value.get(project.project_uid) ?? false;
const canCancel = (project: Project) => canCancelMemo.value.get(project.project_uid) ?? false;

// 批量操作按钮的禁用逻辑
const canBatchRetry = computed(() => {
  return selectedProjects.value.length > 0 && 
         selectedProjects.value.some(project => canRetryProject(project.status));
});

const canBatchCancel = computed(() => {
  return selectedProjects.value.length > 0 && 
         selectedProjects.value.some(project => canCancelProject(project.status));
});

const applyFilters = () => {
  pagination.currentPage = 1;

  // 保持轮询禁用状态，避免表格频繁刷新
  disablePolling();

  loadProjects();
};

const handlePageChange = () => {
  loadProjects();
};

const loadProjects = () => {
  const params: any = {
    skip: (pagination.currentPage - 1) * pagination.pageSize,
    limit: pagination.pageSize,
    sort_by: 'created_at',
    order: 'desc'
  };
  if (filters.q) params.q = filters.q;
  if (filters.status) params.status = filters.status;

  // Debug logs removed for production

  fetchProjects(params);

  // 数据加载后更新选择状态
  setTimeout(() => {
    updateAllSelectedStatus();
  }, 100);
};

// 手动刷新数据
const handleManualRefresh = async () => {
  if (isRefreshing.value) return;

  isRefreshing.value = true;
  try {
    await forceRefresh();
    ElMessage.success('数据刷新成功');
  } catch (error) {
    console.error('刷新数据失败:', error);
    ElMessage.error(`数据刷新失败: ${error instanceof Error ? error.message : '未知错误'}`);
  } finally {
    isRefreshing.value = false;
  }
};

const handleSelectionChange = (selection: Project[]) => {
  selectedProjects.value = selection;
  // 检查是否全选
  updateAllSelectedStatus();
};

// 更新全选状态
const updateAllSelectedStatus = () => {
  if (selectedProjects.value.length === 0) {
    isAllSelected.value = false;
  } else if (filters.status || filters.q) {
    // 如果有筛选条件，检查是否选择了所有筛选结果
    isAllSelected.value = selectedProjects.value.length === totalProjects.value;
  } else {
    // 没有筛选条件，检查是否选择了所有项目
    isAllSelected.value = selectedProjects.value.length === totalProjects.value;
  }
};

// 选择当前页所有项目
const selectAllVisible = () => {
  // 使用Element Plus表格的toggleAllSelection方法
  const table = document.querySelector('.el-table') as any;
  if (table && table.__vue__) {
    table.__vue__.toggleAllSelection();
  } else {
    // 备用方案：手动选择当前页所有项目
    selectedProjects.value = [...safeProjects.value];
    updateAllSelectedStatus();
  }
};

// 分批删除所有符合筛选条件的项目
const handleDeleteAllProjects = async () => {
  if (loadingAllSelection.value) return;

  // 构建筛选条件描述
  let filterDescription = '所有项目';
  if (filters.status) {
    filterDescription = `所有${getStatusLabel(filters.status)}项目`;
  }
  if (filters.q) {
    filterDescription += `（包含"${filters.q}"）`;
  }

  // 严肃警告对话框
  try {
    await ElMessageBox.confirm(
      `⚠️ 危险操作警告 ⚠️\n\n您即将删除 ${filterDescription}，共计 ${totalProjects.value} 个项目。\n\n此操作将：\n• 永久删除所有选中的项目数据\n• 无法撤销或恢复\n• 此操作不影响已上传的字幕文件\n\n请确认您真的要执行此操作！`,
      '⚠️ 批量删除确认',
      {
        confirmButtonText: '我确认删除',
        cancelButtonText: '取消',
        type: 'error',
        dangerouslyUseHTMLString: false,
        distinguishCancelAndClose: true,
        confirmButtonClass: 'el-button--danger'
      }
    );

    // 开始分批删除
    loadingAllSelection.value = true;
    deleteProgress.value = { current: 0, total: totalProjects.value };
    await performBatchDelete();

  } catch (error) {
    // 用户取消了操作
    console.log('用户取消了删除操作');
  }
};

// 执行分批删除
const performBatchDelete = async () => {
  try {
    // 根据项目数量动态调整批次大小
    const totalCount = totalProjects.value || 0;
    let batchSize: number;
    let delayTime: number;
    
    if (totalCount <= 50) {
      batchSize = 10; // 小批量，快速处理
      delayTime = 300;
    } else if (totalCount <= 200) {
      batchSize = 20; // 中等批量
      delayTime = 500;
    } else {
      batchSize = 30; // 大批量，减少服务器压力
      delayTime = 800;
    }
    
    let deletedCount = 0;
    let failedCount = 0;
    let consecutiveErrors = 0;
    const maxConsecutiveErrors = 3;

    // 显示开始消息
    ElMessage.info(`开始分批删除 ${totalCount} 个项目（每批 ${batchSize} 个）...`);

    for (let skip = 0; skip < totalCount && consecutiveErrors < maxConsecutiveErrors; skip += batchSize) {
      const params: any = {
        skip: 0, // 总是从0开始，因为删除后项目会减少
        limit: Math.min(batchSize, totalCount - deletedCount),
        sort_by: 'created_at',
        order: 'desc'
      };

      if (filters.q) params.q = filters.q;
      if (filters.status) params.status = filters.status;

      try {
        // 获取当前批次的项目（增加超时时间）
        const response = await Promise.race([
          getProjects(params),
          new Promise((_, reject) => 
            setTimeout(() => reject(new Error('获取项目超时')), 45000)
          )
        ]) as any;

        if (!response.items || response.items.length === 0) {
          break; // 没有更多项目了
        }

        // 如果是失败状态的项目，进一步减小批次大小
        let currentBatchSize = response.items.length;
        if (filters.status === 'failed' && currentBatchSize > 15) {
          // 失败状态的项目可能需要更多处理时间，减小批次
          const chunks = [];
          for (let i = 0; i < currentBatchSize; i += 10) {
            chunks.push(response.items.slice(i, i + 10));
          }
          
          // 分批处理失败项目
          for (const chunk of chunks) {
            try {
              const chunkUids = chunk.map((p: any) => p.project_uid);
              await Promise.race([
                apiBatchUpdateProjects('delete', chunkUids),
                new Promise((_, reject) => 
                  setTimeout(() => reject(new Error('删除失败项目超时')), 60000)
                )
              ]);
              deletedCount += chunk.length;
              deleteProgress.value.current = deletedCount;
              
              // 失败项目处理间隔更长
              await new Promise(resolve => setTimeout(resolve, 1000));
            } catch (chunkError) {
              console.error('删除失败项目块失败:', chunkError);
              failedCount += chunk.length;
              consecutiveErrors++;
            }
          }
        } else {
          // 正常处理其他状态的项目
          const projectUids = response.items.map((p: any) => p.project_uid);
          await Promise.race([
            apiBatchUpdateProjects('delete', projectUids),
            new Promise((_, reject) => 
              setTimeout(() => reject(new Error('删除项目超时')), 45000)
            )
          ]);
          deletedCount += response.items.length;
          deleteProgress.value.current = deletedCount;
        }

        // 重置连续错误计数
        consecutiveErrors = 0;

        // 每10个项目更新一次进度
        if (deletedCount % 10 === 0 || deletedCount === totalCount) {
          const progress = Math.round((deletedCount / totalCount) * 100);
          console.log(`删除进度: ${progress}% (${deletedCount}/${totalCount})`);
        }

        // 根据处理情况调整延迟时间
        await new Promise(resolve => setTimeout(resolve, delayTime));

      } catch (batchError: any) {
        console.error(`删除第 ${Math.floor(skip / batchSize) + 1} 批项目失败:`, batchError);
        failedCount += Math.min(batchSize, totalCount - deletedCount);
        consecutiveErrors++;
        
        // 根据错误类型调整延迟
        if (batchError.message && batchError.message.includes('超时')) {
          // 超时错误，增加更长的延迟
          await new Promise(resolve => setTimeout(resolve, 3000));
        } else {
          // 其他错误，中等延迟
          await new Promise(resolve => setTimeout(resolve, 1500));
        }
      }
    }

    // 刷新数据
    await forceRefresh();

    // 显示最终结果
    if (failedCount === 0) {
      ElMessage.success(`✅ 批量删除完成！共删除 ${deletedCount} 个项目`);
    } else if (deletedCount > 0) {
      ElMessage.warning(`⚠️ 批量删除完成，成功删除 ${deletedCount} 个项目，失败 ${failedCount} 个项目`);
    } else {
      ElMessage.error(`❌ 批量删除失败，所有 ${failedCount} 个项目删除失败`);
    }

  } catch (error) {
    console.error('批量删除失败:', error);
    ElMessage.error(`批量删除失败: ${error instanceof Error ? error.message : '未知错误'}`);
  } finally {
    loadingAllSelection.value = false;
    deleteProgress.value = { current: 0, total: 0 };
  }
};

// 清除选择
const clearSelection = () => {
  selectedProjects.value = [];
  isAllSelected.value = false;

  // 清除表格选择状态
  const table = document.querySelector('.el-table') as any;
  if (table && table.__vue__) {
    table.__vue__.clearSelection();
  }
};


const handleBatchAction = (action: 'retry' | 'cancel' | 'delete') => {
    const uids = selectedProjects.value.map(p => p.project_uid);
    if(uids.length === 0){
        ElMessage.warning('请先选择要操作的项目。');
        return;
    }
    
    // 检查所选项目是否可以进行相应的操作
    const invalidProjects = selectedProjects.value.filter(project => {
        if (action === 'retry') return !canRetryProject(project.status);
        if (action === 'cancel') return !canCancelProject(project.status);
        return false; // 删除操作没有状态限制
    });
    
    if (invalidProjects.length > 0) {
        const actionNames = {
            retry: '重试',
            cancel: '取消',
            delete: '删除'
        };
        const statusList = [...new Set(invalidProjects.map(p => getProjectStatusText(p.status)))].join('、');
        ElMessage.warning(`所选项目中有 ${invalidProjects.length} 个项目无法进行${actionNames[action]}操作（状态：${statusList}）。请检查选择的项目状态。`);
        return;
    }
    
    batchUpdateProjects(action, uids);
};

// Expose a method for parent component to refresh data
const refresh = async () => {
    try {
      await forceRefresh();
    } catch (error) {
      console.error('刷新项目列表失败:', error);
      // 回退到普通加载
      loadProjects();
    }
}
defineExpose({ refresh });

// 内存优化：定期清理缓存
const cleanupCaches = () => {
  try {
    // 清理日期格式化缓存，保留最近使用的条目
    if (dateFormatCache.size > MAX_CACHE_SIZE) {
      const entries = Array.from(dateFormatCache.entries());
      dateFormatCache.clear();
      // 保留最近使用的一半条目
      const keepCount = Math.floor(MAX_CACHE_SIZE / 2);
      entries.slice(-keepCount).forEach(([key, value]) => {
        dateFormatCache.set(key, value);
      });
    }
  } catch (error) {
    console.error('清理缓存失败:', error);
    // 如果清理失败，直接清空缓存
    dateFormatCache.clear();
  }
};

// 设置定期清理
let cleanupInterval: number | undefined;

onMounted(() => {
  try {
    loadProjects();
    // 禁用轮询，避免表格频繁刷新
    disablePolling();
    // 每3分钟清理一次缓存（减少清理间隔）
    cleanupInterval = window.setInterval(cleanupCaches, 3 * 60 * 1000);
  } catch (error) {
    console.error('组件初始化失败:', error);
  }
});

onBeforeUnmount(() => {
  // 清理定时器
  if (cleanupInterval !== undefined) {
    clearInterval(cleanupInterval);
    cleanupInterval = undefined;
  }

  // 清理所有缓存
  try {
    dateFormatCache.clear();
  } catch (error) {
    console.error('清理缓存失败:', error);
  }

  // 停用轮询
  disablePolling();
});
</script>

<style scoped>
.project-status-tab {
  padding: 20px;
  background-color: #fff;
}
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.filters {
  display: flex;
  gap: 10px;
}
.filter-item {
    width: 200px;
}
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.subtitle-details {
    padding: 15px 20px;
    background-color: #f9f9f9;
}
.subtitle-details h4 {
    margin-top: 0;
    margin-bottom: 10px;
}

.status-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.retry-count {
  font-size: 12px;
  color: #909399;
  background-color: #f5f7fa;
  padding: 2px 6px;
  border-radius: 4px;
  align-self: flex-start;
}

.error-message {
  display: flex;
  align-items: center;
}

.error-message .el-tag {
  max-width: 100%;
  cursor: help;
}

.error-message .el-icon {
  margin-right: 4px;
}

.no-error {
  color: #c0c4cc;
  font-style: italic;
}

.selection-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.all-selected-indicator {
  color: #409eff;
  font-weight: bold;
  margin-left: 8px;
}

.status-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.retry-count {
  font-size: 12px;
  color: #909399;
  background-color: #f5f7fa;
  padding: 2px 6px;
  border-radius: 4px;
  align-self: flex-start;
}
</style> 